<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://www.hx.com/tags" prefix="hx" %>
<%   String path = request.getContextPath();   
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
%>
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="description" >
<hx:ajax jquery="true"/>
<title>幸运大转盘抽奖</title>
<link href="/games/award/files/activity-style.css" rel="stylesheet" type="text/css">

</head>

<body class="activity-lottery-winning">
<div class="main" >
<script type="text/javascript">
var loadingObj = new loading(document.getElementById('loading'),{radius:20,circleLineWidth:8});   
    loadingObj.show(); 
function submitResult(){
	var prized = $("#prizetype").text();
	var scno = $("#sncode").text();
	var phone = document.getElementById("telNo").value;
	$hx.service("awa.saveResultAjax",[prized,scno,phone],function(result2){
		if(result2){
			location.reload();
		}
	});
}
</script>

 <div id="outercont" >
	<div id="outer-cont" style="overflow:hidden;">
		<div id="outer"><img src="/games/award/files/activity-lottery-1.png" width="310px"></div>
	</div>
	<div id="inner-cont">
		<div id="inner"><img src="/games/award/files/activity-lottery-2.png"></div>
	</div>
	</div>
	
<div class="content">
	<div class="boxcontent boxyellow" id="result" style="display:none">
		<div class="box">
		<div class="title-orange"><span>恭喜你中奖了</span></div>
			<div class="Detail">
			            <a class="ui-link" href="#" id="opendialog" style="display: none;" data-rel="dialog"></a>
			<p>你中了：<span class="red" id="prizetype"></span></p>
			<p>你的兑奖SN码：<span class="red" id="sncode"></span></p>
			<p class="red">本次兑奖码将关联你的微信号，你需要向公众号发送手机号进行绑定!</p>
			               
			<p>
			<input name="tel" class="px" id="telNo" type="number" placeholder="输入您的手机号码">
			</p>
			<p>
			<input class="pxbtn" id="save-btn" name="提 交" type="button" onclick="submitResult();" value="提 交">
			</p>
			</div>
		</div>
	</div>
<div class="boxcontent boxyellow">
<div class="box">
<div class="title-green"><span>奖项设置：</span></div>
	<div class="Detail">
		<p>一等奖：价值100元现金抵用券 。奖品数量：5名 </p>
		<p>二等奖：价值50元现金抵用券 。奖品数量：10名 </p>
		<p>三等奖：价值20元现金券 。奖品数量：20名 </p>
	</div>
</div>
</div>
<div class="boxcontent boxyellow">
<div class="box">
<div class="title-green">活动说明：</div>
<div class="Detail">
<p>本次活动每人每天可以转 3 次 </p>
               <p> 我们的中奖率高达33.3%！！ </p>
</div>
</div>
</div>
</div>

</div>

<script type="text/javascript" src="/games/award/files/jquery.min.js"></script>
<script type="text/javascript" src="/games/award/files/jQueryRotate.2.2.js"></script>
<script type="text/javascript" src="/games/award/files/jquery.easing.min.js"></script>
<script type="text/javascript">
function generateRandomAlphaNum(len) {
    var rdmString = "";
    for( ; rdmString.length < len; rdmString+= Math.random().toString(36).substr(2));
    return  rdmString.substr(0, len);

}

$(function(){ 
    $("#inner").click(function(){
        lottery(); 
    }); 
     
     /*  $("#inner").bind("click",function(){
    	  lottery(); 
      }); */
}); 
function lottery(){ 
    $.ajax({ 
        type: 'POST', 
        url: "<%=basePath%>/award/getResult.action", 
        data:"data",
        dataType: 'json', 
        cache: false, 
        error: function(){ 
            alert('出错了！'); 
            return false; 
        }, 
        success:function(json){ 
            $("#inner").unbind('click').css("cursor","default"); 
            var a = parseInt(json.angle); //角度 
            var p = json.prize; //奖项 
            var msg = json.msg; //提示信息
            var scn = generateRandomAlphaNum(12).toLocaleUpperCase();
            $("#outer").rotate({ //inner内部指针转动，outer，外部转盘转动
                duration:5000, //转动时间 
                angle: 0, //开始角度 
                animateTo:3600+a, //转动角度 
                easing: $.easing.easeOutSine, //动画扩展 
                callback: function(){ 
                	if(p==0 || p==1 || p==5 || p==9){
                		$("#result").css("display","");
                        $("#prizetype").text(msg);
                        $("#sncode").text(scn); 
                	}else if(p==1000){
                		alert(msg);
                	}else{
                		var con = confirm(msg+'\n还要再来一次吗？'); 
                        if(con){ 
                            lottery(); 
                        }else{ 
                            return false; 
                        } 
                	}
                } 
            }); 
        } 
    }); 
}
</script>
</body></html>